<template>
    <el-menu  mode="horizontal"
              style="height: 60px;"
              @select="handleSelect"
              @open="handleOpen"
              @close="handleClose">
        <template v-for="item in menuList">
            <el-submenu v-if="item.children" :index="item.name" :route="item" :key="item.path">
                <template slot="title" :index="item.name">
                    <!--<i :class="item.icon"></i>-->
                    <span class="sidebar-menu-text" slot="title">{{ item.meta.title }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item v-for="groupItem in item.children" :index="groupItem.name"
                                  :key="groupItem.path"
                                  :route="groupItem">
                        <!--<i :class="groupItem.icon" :key="groupItem.path" style="width:24px"></i>-->
                        <span class="sidebar-menu-text" slot="title">{{ groupItem.meta.title }}</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-menu-item v-if="!item.children" :index="item.name" :route="item" :key="item.path">
                <!--<i :class="item.icon"></i>-->
                <span class="sidebar-menu-text" slot="title">{{ item.meta.title }}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script>
    export default {
        name: "menuBar",
        computed: {
            menuList() {
                // return this.$router.options.routes[1].children[1].children;
                return this.$store.state.layout.menuList.slice()
            },
        },
        data(){
            return{
                isCollapse:true
            }
        },
        watch: {
            '$route'(to, from) {
                this.currentPageName = to.name
            },
            currentPageName() {
                if (this.$store.state.layout.ready) {
                    this.setCurrentPath()
                } else {
                    setTimeout(() => {
                        this.setCurrentPath()
                    }, 100)
                }
            }
        },
        methods: {
            // handleselect: function (a, b) {
            //     debugger
            //     this.$router.push(a);
            // },
            init() {
                this.currentPageName = this.$router.name;
            },
            handleOpen(key, keyPath) {

            },//打开下拉选项事件的响应函数

            handleClose(key, keyPath) {

            },//关闭下拉选项事件的响应函数
            handleSelect(menuName) {
                this.currentPageName = menuName;
                this.$router.push({
                    name: menuName
                })
            },
            change(item) {
                // console.log(item);
                // console.log(this.menuList);
                // item.color = "#f7a8a9";
            },
            setCurrentPath() {
                //不知道方法什么意思，但是可以解决跳转时报出的name的bug
                // this.$store.dispatch('openTab', this.$route.name);
                this.$store.dispatch('setCurrentPath', this.$route.name).then(() => {
                    this.openedMenuList = this.$store.state.layout.openedMenuNameList.slice();
                    this.$nextTick(() => {
                    })
                })
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style>
    .el-menu-item *{
        color: #2d2f33;
    }
    .el-submenu__title *{
        color: #2d2f33;
    }
</style>